<template>
  <el-row class="tag-group" :gutter="15">
    <el-col class="label" :xs="24" :sm="2" :md="2" :lg="2" :xl="1">{{ title }}</el-col>
    <el-col class="tags" :xs="24" :sm="22" :md="22" :lg="22" :xl="23">
      <div class="tag" :class="{selected: !tags.length}" @click="clearTags">不限</div>
      <div v-for="(tag,index) of data" :key="tag" class="tag" :class="{selected: marks[index]}" @click="modifyTag(tag,index)">{{ tag }}
        <!-- <i v-show="marks[index]" class="el-icon-close tag-icon" /> -->
      </div>
    </el-col>
  </el-row>
</template>
<script>
export default {
  name: 'TagGroup',
  model: {
    prop: 'tags',
    event: 'modify'
  },
  props: {
    // 选中项
    tags: {
      required: true,
      type: Array
    },
    // 导入数据
    data: {
      required: true,
      type: Array
    },
    // 指标名
    title: {
      required: true,
      type: String
    }
  },
  data() {
    return {
      marks: [] // 是否选中条件的标记数组，用于降低时间复杂度到O(1)
    }
  },
  watch: {
    data(val) {
      val && (this.marks = new Array(val.length).fill(false))
    }
  },
  methods: {
    clearTags() {
      this.marks = new Array(this.data.length).fill(false)
      this.$emit('modify', [])
    },
    modifyTag(tag, index) {
      if (this.marks[index]) {
        this.tags.splice(this.tags.findIndex(i => i === tag), 1)
      } else {
        this.tags.push(this.data[index])
      }
      this.marks[index] = !this.marks[index]
    }
  }
}
</script>
<style lang="scss" scoped>
@mixin selected {
  background: rgba($primary,0.7);
  color: $white;
  box-shadow: $shadow;
  border-radius: 99px;
  scale: 1.05;
}
.selected {
    @include selected;
}
.tag-group {
  padding: 10px 5px;
  .label {
    padding: 4px;
    color: $rText;
    text-align: center;
    letter-spacing: 1px;
    font-weight: bold;
    border-right: 1px solid $grey;
  }
  .tags {
      display: flex;
      flex-wrap: wrap;
      color: $text;
      .tag {
          user-select: none;
          padding: 4px 8px;
          margin-right: 4px;
          margin-bottom: 4px;
          cursor: pointer;
          transition: all .2s;
          &:hover {
            @include selected;
          }
          &-icon {
              margin-left: 2px;
          }
      }
  }
}
</style>
